<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        list-style: none;
      }
      #app {
        position: relative;
      }

      .loading {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        font-size: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .todo-wrapper {
        padding: 20px;
        width: 500px;
        height: 500px;
        max-height: 500px;
        margin: 50px auto;
        border: 1px solid #000;
        overflow: auto;
      }
      .todo-control,
      .todo-view {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .todo-view {
        display: flex;
        flex-direction: column;
      }
      .todo-view-item {
        width: 100%;
        display: flex;
        justify-content: flex-start;
      }
      .remove-btn {
        margin: 5px;
        background: lightblue;
        border-radius: 5px;
      }
      .toggle-active {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="todo-wrapper">
        <div class="todo-control">
          <!-- <input type="text" @keyup.13="onKeyup" /> -->
          <!-- 事件修饰符 .enter 13(按键修饰符) -->
          <input type="text" @keyup.enter="onKeyup" />
        </div>
        <h2>未完成{{total}}</h2>
        <div class="todo-view">
          <ul class="todo-view-item" v-for="(item, index) in list">
            {{item.check}}
            <input
              type="checkbox"
              @change="handleChange(item)"
              :checked="item.check"
            />
            <li class="todo-item" :class="item.check ? 'toggle-active' : '' ">
              {{item.value}}
            </li>
            <span @click="handleRevemoItem(index)" class="remove-btn">
              删除
            </span>
          </ul>
        </div>
        <h2>已经完成</h2>
        <div class="todo-view">
          <ul
            class="todo-view-item"
            v-for="(item, index) in list.filter(v => v.check)"
          >
            <li class="todo-item">{{item.value}}</li>
            <span @click="handleRevemoItem(index)" class="remove-btn">
              删除
            </span>
          </ul>
        </div>
      </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>

    <script>
      /*
       案例 todoList:
       1. 实现点击回车键盘，获取输入框的内容 （涉及知识点：事件修饰符）
       2. 根据获取到的数据，列表渲染
       3. checkbox 更改选中的状态
       4. 利用计算属性，统计所有未完成的状态  
      */

      /**
       * vue的数据。可以定义在以下两个地方
       * 1. 定义在data中，是不是会有响应式效果
       * 2. 可以定义在计算属性中，只要值是依赖于data的，也可以有响应式数据
       */

      /*
        vue 开发代码的流程：（数据驱动dom，尽量使用数据，通过数据的变化，改变dom的效果）
        1. 定义数据 -> data (静态数据) => computed中(经过计算的数据，往往跟data数据相关)
        2. 渲染数据 -> v-for 循环指令 + {{}}
        3. 操作数据 -> 一般使用函数操作 -> 函数定义在哪儿 -> methods -> 数组/字符串方法
        4. 数据如果是异步的呢？ created生命周期处理好，
        5. 数据如果涉及到多个异步数据的？（select 下拉框 每次选择都是一个异步数据的更新），watch
          watch可以监听多个异步数据的变更
        6. 如果数据需要在渲染的时候，做一个复杂的运算的时候，用什么？ computed
        7. 如果数据在渲染的过程中，有判断/显示隐藏，v-show/v-if
        8. mounted 特殊情况下操作dom使用
        9. 动态数据渲染的时候，需要使用v-bind / : 还是使用 {{}}?
          {{item}} 
          1). :src="src" :alt="" :class=""  style
          2). v-bind 应用在组件传递参数上
      */

      // 数据驱动dom
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          // total: 0,
        },
        watch: {},
        // 计算属性 可以根据data中的响应式数据，自动计算结果，不需要频繁调用函数
        computed: {
          total() {
            return this.list.filter((v) => !v.check).length
          },
        },
        created() {},
        mounted() {},
        methods: {
          // 添加
          onKeyup(e) {
            if (e.target.value) {
              this.list.push({
                id: Date.now(),
                value: e.target.value,
                check: false,
              })
              e.target.value = ''
              // this.handleTotalUnfinished()
            }
          },
          // 删除
          handleRevemoItem(index) {
            //
            this.list.splice(index, 1)
            // this.handleTotalUnfinished()
          },
          // 监听change事件
          handleChange(item) {
            console.log(item.check)
            item.check = !item.check
            // checkbox状态改变的时候，调用计算未完成数量
            // this.handleTotalUnfinished()
          },
          // handleTotalUnfinished() {
          //   this.total = this.list.filter((v) => !v.check).length
          // },
        },
      })
    </script>
  </body>
</html>
